<template id="Member">
   <div>
      <div id="stroll">
         <div class="Member_top">
            <div class="member_top_first">
               <span>¥</span>
               <span>{{level_info.money}}</span>
               <span>/月 <time>原价{{level_info.price}}元</time></span>
               <span>{{level_info.tips}}</span>
               <span>{{user_member.cname}}</span>
            </div>
            <div class="member_top_second">
               <p>每单返{{user_member.scale}}%</p>
               <p>累计返现无上限</p>
               <p  @click="get_Mem()">立即开通</p>
            </div>
         </div>
         <div class="Member_list">
            <div class="swiper-container" id="Member_swiper">
               <div class="swiper-wrapper">
                  <div class="swiper-slide" @click="get_now()">
                     <img src="../image/Backnow.png" alt="">
                     <span>购物返现<time>{{user_member.scale}}</time>%</span>
                  </div>
                  <div class="swiper-slide" @click="get_friend()">
                     <img src="../image/my_friend.png" alt="">
                     <span>邀好友返现<time>{{user_member.scale}}</time>%</span>
                  </div>
                  <div class="swiper-slide" @click="get_member_good()">
                     <img src="../image/member_goods.png" alt="">
                     <span>会员商品</span>
                  </div>
                  <div class="swiper-slide" @click="get_try()">
                     <img src="../image/t_eat.png" alt="">
                     <span>新品试吃</span>
                  </div>
                  <div class="swiper-slide" @click="get_zhuan()">
                     <img src="../image/kefu.png" alt="">
                     <span>专业客服</span>
                  </div>
               </div>
            </div>
         </div>
         <div class="Member_banner">
            <div class="Member_bian">
              <a :href="images.link">
                <img v-bind:src="images.url ? images.url : banner"  alt="" >
              </a>
            </div>
         </div>
         <div class="Member_title">
            <p>会员商品·抢鲜购</p>
            <p>会员福利大放送</p>
         </div>
         <div class="Member_goods">
            <div class="Member_goods_bu_mmg" v-for="sel in tag">
               <div class="Member_goods_li_st">
                  <div class="Member_goods_x_m"><img class="img_l1"  :src="sel.thumb" alt="" @click="getDetail(sel.id)"></div>
                  <div class="Member_goods_x_right">
                     <h2 @click="getDetail(sel.id)">{{sel.name}}</h2>
                     <p @click="getDetail(sel.id)">{{sel.brief}}</p>
                     <div class="Member_goods_Select_price">
                      <span @click="getDetail(sel.id)">
                        <strong>{{sel.shop_price | my-filter}}</strong>
                        <time v-if="sel.goods_share">/{{sel.goods_share}}</time>
                    </span>
                      <img src="../image/gou.png" alt="" @click="addCart(sel.id,sel.thumb)"></div>
                  </div>
               </div>
            </div>
         </div>
             <p style="height:1rem;"></p>
         <v-footer></v-footer>
      </div>
   </div>
</template>
<script>
    import footer from './footer.vue'
    export default{
        name: 'Member',
        components:{
            'v-footer':footer,
        },
        data(){
            return{
                tag:[],
                banner:require('../image/blue_ban.jpg'),
                images:'',
                level_info:'',
                user_member:[],
            }
        },
        mounted:function(){
            /* alert(window.innerHeight)*/
            /* let H=window.innerHeight-90;*/
            /* $('#stroll').height(H)*/
            //这里使用的促销的接口数据
            let Member_swiper = new Swiper('#Member_swiper', {
                observer:true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents:true,//修改swiper的父元素时，自动初始化swiper
                slidesPerView:4.5,
                direction:'horizontal',

            });

            //会员基础信息
            this.GLOBAL.user_member(this);

            //广告图
            this.get_banner();

            //获取会员类型周期
            let level  = [];
            level['c'] = 'Member';
            level['m'] = 'users_level_info';
            this.get_member_api(level);



            //获取会员商品
            let data  = [];
            data['c'] = 'Member';
            data['m'] = 'user_goods_list';
            this.get_member_api(data);


        },
        methods:{
            /*新品试吃*/
            get_try:function(){
                this.$router.push('/try_eat')
            },
            /*购物返现*/
            get_now:function(){
                this.$router.push('/Back_now')
            },
            /*会员商品*/
            get_member_good:function(){
                this.$router.push('/member_good')
            },
            /*专享客服*/
            get_zhuan:function(){
                this.$router.push('/Cus_service')
            },
            /*邀请好友*/
            get_friend:function(){
                this.$router.push('/Invite_friends')
            },

            get_member_api(data){
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/index.php';
                let Data = this.GLOBAL.dataParam(data);

                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        if(data['m'] == 'users_level_info'){
                            this.level_info = temp.data;
                        }

                        if(data['m'] == 'user_goods_list'){
                            this.tag = temp.data;
                        }

                       // console.log(temp.data);
                    }else{
                       /* this.GLOBAL.center_error(this,temp);*/
                    }
                })
            },
            get_banner:function(){
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Index.php?mode=memberbanner';
                let Data = this.GLOBAL.dataParam();

                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.images = temp.data;
                    }else{
                        // this.GLOBAL.center_error(this,temp);
                    }
                })

            },
            golink:function(){
                if(this.images.link){
                    this.$router.push(this.images.link);
                }
            },
            /*会员权益*/
            get_Mem:function(){
                this.$router.push('/member_right')
            },
            getDetail:function(id){
                this.$router.push('/shopDetails?goods_id=' + id);
            },
            addCart:function (goods_id,image, number = 1) {
                this.GLOBAL.addCart(this,goods_id,number);
                this.GLOBAL.get_te(image)
            }
        }
    };

</script>
<style>
   /*会员头部列表*/
   .Member_list{
      height:1.26rem;
      width:100%;
      padding-top:0.34rem;
   /*   overflow: hidden;*/
   }
   #Member_swiper .swiper-wrapper .swiper-slide{
      width: 1.4rem;
      height:1.26rem;
   }
   #Member_swiper .swiper-wrapper{
   /*   width: 100%;*/
   }
   .swiper-container {
    /*  width: 1.4rem;
      overflow: visible;
      margin-left:0rem;*/
   }
   .swiper-slide img{
      display:block;
      height:0.6rem;
      width:0.6rem;
      margin-left:0.36rem;
      margin-bottom:0.21em;

   }
   .swiper-slide span{
      display:block;
      width: 1.4rem;
      height:0.2rem;
      line-height:0.2rem;
      font-size:0.2rem;
      color:#858484;
      text-align:center;
   }
   .swiper-slide span time{
      color:#ca1b80;
   }

   #stroll{
      /*  position:relative;
        bottom:0.9rem;*/
   }
   .Member_goods{
      width:100%;
      height:auto;
   }
   .Member_goods .Member_goods_bu_mmg:last-of-type{
      border-bottom:0;
   }
   .Member_goods_bu_mmg{
      height:2.26rem;
      width:100%;
      border-top:0.01rem solid #f0f0f0;
   }
   .flyer-img{height:50px;width:50px;border-radius: 50%;}
   .Member_goods_li_st{
      height:2.26rem;
      width:5.95rem;
      margin:0 auto;
      display:flex;
      /*   flex-wrap: wrap;*/
      justify-content:flex-start;
      /*  border-bottom:0.01rem solid #f0f0f0;*/
   }
   .Member_goods_Select_price{
      height:0.68rem;
      position:relative;
      top:0;
   }
   .Member_goods_Select_price span{
      display:block;
      color:#fc1dac;
      font-size:0.18rem;
      width:2rem;
      height:0.68rem;
      line-height:0.68rem;
   }
   .Member_goods_Select_price strong{
      font-size:0.24rem;
   }
   .Member_goods_Select_price img{
      display:block;
      position:absolute;
      top: -0.08rem;
      right:0.2rem;
      height:0.6rem;
      width:0.6rem;
   }
   .Member_goods_x_m{
      /* flex:1;*/
      height:2.26rem;
      width:2.12rem;
   }
   .Member_goods_x_m img{
      /* display:block;*/
      width:2rem;
      height:2rem;
      margin:0 auto;
   }
   .Member_goods_x_right{
      height: 1.76rem;
      width:3.84rem;
      /* flex: 1;*/
      padding-top: 0.5rem
   }
   .Member_goods_x_right h2{
      height:0.42rem;
      color:#4a4a4a;
      font-size:0.28rem;
      line-height:0.25rem;
      font-weight:normal;
   }
   .Member_goods_x_right p{
      height:0.35rem;
      color:#bababa;
      font-size:0.19rem;
      line-height:0.19rem;
   }
   /*商品列表*/
   .Member_title{
      height:1.06rem;
      width:100%;
      padding-top:0.42rem;
   }
   .Member_title p:nth-of-type(1){
      height:0.44rem;
      line-height:0.44rem;
      text-align:center;
      color:#303030;
      font-size: 0.3rem;
   }
   .Member_title p:nth-of-type(2){
      height:0.39rem;
      line-height:0.39rem;
      text-align:center;
      color:#a1a1a1;
      font-size: 0.2rem;
   }
   /*11*/
   .Member_banner{
      height:1.57rem;
      width:100%;
   }
   .Member_bian{
      width:6.04rem;
      height:1.57rem;
      margin:0 auto;
      border-radius:0.05rem;
   }
   .Member_banner img{
      display:block;
      width:6.04rem;
      height:1.57rem;
   }

   /*会员头部*/
   .member_top_second p:nth-of-type(3){
      height:0.62rem;
      width:1.56rem;
      line-height:0.62rem;
      color:#ffffff;
      font-size:0.3rem;
      text-align:center;
      position:absolute;
      right:0.2rem;
      top:0.03rem;
      border-radius:0.05rem;
      background: -webkit-linear-gradient(left, #ffa0dd , #ff56c2); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #ffa0dd, #ff56c2); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right,  #ffa0dd, #ff56c2); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #ffa0dd, #ff56c2); /* 标准的语法（必须放在最后） */
   }
   .member_top_second{
      height:0.89rem;
      position:relative;
   }
   .member_top_second p:nth-of-type(1){
      height:0.36rem;
      line-height:0.36rem;
      color:#ffffff;
      font-size:0.24rem;
      text-indent: 0.3rem;
   }
   .member_top_second p:nth-of-type(2){
      height:0.36rem;
      line-height:0.36rem;
      color:#ffffff;
      font-size:0.24rem;
      text-indent: 0.3rem;
   }
   .member_top_first span:nth-of-type(5){
      display:block;
      height:0.43rem;
      width:1.5rem;
      background: -webkit-linear-gradient(left, #dcc495 , #c8ac6d); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #dcc495, #c8ac6d); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right,  #dcc495, #c8ac6d); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #dcc495, #c8ac6d); /* 标准的语法（必须放在最后） */
      line-height:0.43rem;
      text-align:center;
      font-size:0.28rem;
      color:#ffffff;
      position:absolute;
      top:0.12rem;
      right:0.2rem;
      border-radius:0.05rem;
   }
   .member_top_first span:nth-of-type(4){
      display:block;
      height:0.26rem;
      width:1.6rem;
      background: -webkit-linear-gradient(left, #ffa0dd , #ff56c2); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, #ffa0dd, #ff56c2); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right,  #ffa0dd, #ff56c2); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #ffa0dd, #ff56c2); /* 标准的语法（必须放在最后） */
      line-height:0.26rem;
      text-align:center;
      font-size:0.22rem;
      color:#ffffff;
      margin-top: -0.6rem;
      margin-left: 1.2rem;
     /* position:absolute;
      top:0.08rem;
      left:1.02rem;*/
      border-radius:0.05rem;
   }
   .member_top_first span:nth-of-type(3){
      width: auto;
      height: 0.27rem;
      display: block;
      font-size: 0.24rem;
      color: #ffffff;
      line-height: 0.27rem;
      /* text-align: center; */
      margin-top: -0.3rem;
      text-indent: 1.2rem;
     /* position:absolute;
      top:0.43rem;
      left:0.96rem;*/
   }
   .member_top_first span:nth-of-type(3) time{
      text-decoration:line-through;
   }
   .member_top_first span:nth-of-type(1){
      display:block;
      height:0.27rem;
      width:0.18rem;
      font-size:0.22rem;
      color:#ffffff;
      line-height:0.27rem;
      text-align:center;
      position:absolute;
      top:0.43rem;
      left:0.3rem;
   }
   .member_top_first span:nth-of-type(2){
      width: 1.2rem;
      height: 0.69rem;
      display: block;
      font-size: 0.67rem;
      color: #ffffff;
      line-height: 0.69rem;
      text-indent: 0.5rem;
      /* text-align: center; */
      /*text-align:center;*/
      /*position:absolute;
      top:0;
      left:0.45rem;*/
   }
   .member_top_first{
      height:0.93rem;
      position:relative;
   }
   .Member_top{
      height:1.82rem;
      width:100%;
      padding-top:0.32rem;
      background:url(../image/center_bac.png) no-repeat;
      background-size: cover;
   }
</style>
